<!-- directive:title liuyp::float需要注意浮动元素的高度不一样导致塌陷的问题 -->
<!-- directive:breadcrumb 遇到的坑 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> float: left 预想完美的效果 </div>
        <div class='panel-body'>
            <div class="row">
                <div class="col-sm-6">
                    <style media="screen" ui-bs>
                        .box1{ background: #ddd; min-height: 150px; width: 150px; }
                        .box1 div{ width: 50px;float: left; }
                        .item1{background: #009688;}
                        .item2{background: #8bc34a;}
                        .item3{background: #ffeb3b;}
                        .item4{background: #ffc107;}
                        .item5{background: #03a9f4;}
                    </style>
                </div>
                <div class="col-sm-6">
                    <div class="box1">
                        <div class="item1">123 <br> 456</div>
                        <div class="item2">123 <br> 456</div>
                        <div class="item3">123 <br> 456</div>
                        <div class="item4">123 <br> 456</div>
                        <div class="item5">123 <br> 456</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> float: left 但是块内的内容永远不可能一致</div>
        <div class='panel-body'>
            <div class="row">
                <div class="col-sm-6">
                    <style media="screen" ui-bs>
                        .box2{ background: #ddd; min-height: 150px; width: 150px; }
                        .box2 div{ width: 50px;float: left; }
                        .item1{background: #009688;}
                        .item2{background: #8bc34a;}
                        .item3{background: #ffeb3b;}
                        .item4{background: red;}
                        .item5{background: #03a9f4;}
                    </style>
                </div>
                <div class="col-sm-6">
                    <div class="box1">
                        <div class="item1">123 <br> 456</div>
                        <div class="item2">123 <br> 456</div>
                        <div class="item3">123 </div>
                        <div class="item4">123 <br> 456 <br> 789</div>
                        <div class="item5">123 <br> 456</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <article class="docs-content">
        <p>也许大部分人就像我一样只记得浮动会让父元素塌陷，无法撑开高度这个特性，可是我们却忘了还有一个重要的特性</p>
        <p>当一个元素浮动以后,他会被移出正常的文档流,然后向左右平移,一致到碰到所处的容器的边框或者另一个浮动元素</p>
    </article>
    <div class='panel panel-default'>
        <div class='panel-heading'> float: left 解决办法，固定高度</div>
        <div class='panel-body'>
            <div class="row">
                <div class="col-sm-6">
                    <style media="screen" ui-bs>
                        .box3{ background: #ddd; min-height: 150px; width: 150px; }
                        .box3 div{ width: 50px; height:80px; float: left; }
                        .item1{background: #009688;}
                        .item2{background: #8bc34a;}
                        .item3{background: #ffeb3b;}
                        .item4{background: red;}
                        .item5{background: #03a9f4;}
                    </style>
                </div>
                <div class="col-sm-6">
                    <div class="box3">
                        <div class="item1">123 <br> 456</div>
                        <div class="item2">123 <br> 456</div>
                        <div class="item3">123 </div>
                        <div class="item4">123 <br> 456 <br> 789</div>
                        <div class="item5">123 <br> 456</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <article class="docs-content">
        <p>父元素塌陷了,嘿嘿管他呐</p>
    </article>
</div>
